<!-- 周边商城列表组件 -->

<template>
	<div class="commodity">
		<ul>
			<li v-for="(item,path,index) in items" :key="index">
				<router-link :to="{ path: item.path }">
					<span class="img">
						<img :src="item.imgSrc" alt="">
					</span>
				</router-link>
				<div>
					<p class="title" v-text="item.title"></p>
					<p class="num">
						<span v-text="item.num"></span>元/m²
					</p>
				</div>

				<p class="address" v-text="item.address"></p>

			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			items: {
				type: Array,
			},
			
		},

		data() {
			return {

			};
		},
		// 截取字符长度
		filters: {
			filterFun: function(value) {
				if (value && value.length > 25) {
					value = value.substring(0, 25) + '...';
				}
				return value;
			}
		},
	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";

	.commodity {
		width: 100%;

		ul {

			text-align: left;

			li {
				width: 100%;
				background: #fff;
				margin-bottom: 20px;
				padding-bottom: 20px;
				box-shadow: 0px 2px 4.5px 1px rgba(0, 0, 0, 0.04);


				.img {
					width: 100%;
					height: 150px;
					display: inline-block;
					margin-bottom: 10px;
					border-top-left-radius: 5px;
					border-top-right-radius: 5px;

					img {
						border-top-left-radius: 5px;
						border-top-right-radius: 5px;
						width: 100%;
						height: 100%;
					}
				}

				div {
					display: flex;
					justify-content: space-between;
                    padding:0 15px;
					p {
						height: 20px;
						margin: 15px 0;
						white-space: nowrap;
						overflow: hidden;
						width: calc(100% - 20px);
						text-overflow: ellipsis;

						&.title {
							font-size: 16px;
							font-weight: bold;
							color: @base-black-color;
						}

						&.num {
							font-size: 15px;
							color: @base-blue-color;
						}
                        &:last-child{
                            text-align: right;
                        }
					}
				}
                .address{
                    padding:0 15px;
                    color:@base-color-gray;
                    font-weight:500;
                    font-size:12px;
                }

			}
		}
	}
</style>
